<template>
  <div class="news-card">
    <div class="d-flex">
      <img class="news-card__img" :src="imgSrc" />
      <div class="news-card__info">
        <div class="d-flex justify-content-between">
          <div class="news-card__date">{{ date }}</div>
          <svg
            @click="$emit('share')"
            class="news-card__share-icon"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="#fff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.8736 20.1568H4.44186C3.97838 20.1568 3.60391 19.7868 3.60391 19.3259V6.04917C3.60391 5.59125 3.97838 5.21824 4.44186 5.21824H11.1577C11.6212 5.21824 11.9988 4.84827 11.9988 4.38731C11.9988 3.92939 11.6243 3.55638 11.1577 3.55638H4.44186C3.05142 3.55638 1.92188 4.67238 1.92188 6.04614V19.3259C1.92188 20.6996 3.04835 21.8156 4.44186 21.8156H17.8736C19.2641 21.8156 20.3936 20.6996 20.3936 19.3259V12.6875C20.3936 12.2296 20.0191 11.8566 19.5526 11.8566C19.0891 11.8566 18.7146 12.2296 18.7146 12.6875V19.3259C18.7116 19.7838 18.3371 20.1568 17.8736 20.1568ZM21.25 3.54122H16.1854C15.7281 3.54122 15.3536 3.17124 15.3536 2.71939C15.3536 2.26753 15.7281 1.89755 16.1854 1.89755H21.25C21.7073 1.89755 22.0818 2.26753 22.0818 2.71939C22.0818 3.17124 21.7073 3.54122 21.25 3.54122Z"
            />
            <path
              d="M22.0855 2.71939V7.7262C22.0855 8.17805 21.711 8.54803 21.2537 8.54803C20.7963 8.54803 20.4219 8.17805 20.4219 7.7262V2.71939C20.4219 2.26753 20.7963 1.89755 21.2537 1.89755C21.711 1.90059 22.0855 2.26753 22.0855 2.71939Z"
            />
            <path
              d="M21.5462 3.5596L9.8548 15.1138C9.53251 15.4322 9.0015 15.4322 8.67922 15.1138C8.35693 14.7954 8.35693 14.2707 8.67922 13.9523L20.3706 2.39812C20.6929 2.0797 21.2208 2.0797 21.5462 2.39812C21.8685 2.71654 21.8685 3.23815 21.5462 3.5596Z"
            />
          </svg>
        </div>
        <div class="news-card__title">{{ title }}</div>
        <div class="news-card__desc">
          {{ desc }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  imgSrc: {
    type: String,
    required: true,
  },
  date: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  desc: {
    type: String,
    required: true,
  },
});

defineEmits(["share"]);
</script>

<style scoped>
.news-card {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  background: #000018;

  display: flex;
  height: 250px;
  border-radius: 0.5rem;
  overflow: hidden;
  word-break: break-all;
}
.news-card__img {
  width: 40%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.news-card__info {
  padding: 20px;
  overflow: hidden;
  max-width: 100%;
}
.news-card__share-icon:hover {
  fill: #7629f5;
  transition: fill 0.3s;
}
.news-card__title {
  color: #fff;
  font-weight: bold;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  max-height: 1.5em;
}
.news-card__desc {
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 5;
  max-height: 7.5em;
}
</style>
